<template>
  <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="config" />
  <div class="formContainer">
    <h3>在线算法学习和动画演示平台</h3>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm" status-icon>
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="ruleForm.user_name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button type="primary" @click="enrollUser">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useUserStore } from "../store/useUserStore.js"
import { useRouterStore } from "../store/useRouterStore.js";
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { config } from '../utils/config.js'
import { loadSlim } from "tsparticles-slim";
import axios from "axios";
import { ElMessage } from "element-plus";

const { changeUser, user } = useUserStore()
const { changeRouter } = useRouterStore()
const router = useRouter()
//获取表单对象
const ruleFormRef = ref()
const ruleForm = reactive({
  user_name: "",
  password: "",
})
const rules = reactive({
  user_name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 13, message: '密码长度需要8-13位', trigger: 'blur' },
  ],
})

//登录回调
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await axios.post(`/oasadapi/users/login`, ruleForm)
      let { code, data } = res.data
      if (code === 0) {
        changeUser(data)
        changeRouter(true)
        if (data.role === 0) {
          router.push("/home")
        } else {
          router.push("/users")
        }

        ElMessage({
          message: "登录成功！",
          type: "success"
        })
      } else {
        ElMessage.error("用户名或密码错误！")
      }
    } else {
      console.log('登录失败!', fields)
    }
  })
}

// 注册回调
const enrollUser = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      await axios.post(`/oasadapi/users`, ruleForm).then((res) => {
        let { code, data } = res.data
        if (code === 0) {
          changeUser(data)
          changeRouter(true)
          router.push("/home")
          ElMessage({
            message: "注册成功！",
            type: "success"
          })
        } else {
          ElMessage.error("用户名已存在！")
        }
      })
    } else {
      ElMessage.error("注册失败！")
    }
  })
}

//粒子
const particlesInit = async engine => {
  await loadSlim(engine);
};

const particlesLoaded = async container => {
  console.log("Particles container loaded", container);
};
</script>



<style lang="scss" scoped>
.formContainer {
  width: 500px;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px 5px black;
  text-align: center;

  .demo-ruleForm {
    margin-top: 40px;
  }

  h3 {
    font-size: 42px;
  }

  :deep(.el-form-item__label) {
    color: white;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>